<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"><!-- 是否启用 WebApp 全屏模式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>试客巴</title>
    <link rel="stylesheet" href="../../css/mobile_reset.css">
    <link rel="stylesheet" href="../../css/mui.css">
    <link rel="stylesheet" href="../../css/invite_friends/invite_friends.css">
    <link rel="stylesheet" href="../../css/index.css">
    <link rel="stylesheet" href="../../css/invite_friends/novicePacks_modal.css">
    <script>
        (function () {
            document.addEventListener('DOMContentLoaded', function () {
                var html = document.documentElement;
                var windowWidth = html.clientWidth;
                html.style.fontSize = windowWidth / 7.5 + 'px';
                // 等价于html.style.fontSize = windowWidth / 750 * 100 + 'px';
            }, false);
        })();

        // 这个7.5就是根据设计稿的横向宽度来确定的，假如你的设计稿是640
        // 那么 html.style.fontSize = windowWidth / 6.4 + 'px';
    </script>

    <style>
        .wrap{
           /* padding:10px;
            border:1px #ccc solid;
            width:500px;
            margin:20px auto;*/
        }
        .roll-wrap{height:0.46rem;overflow:hidden;}
    </style>
</head>
<body>

<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <!--搜索框-->
        <div id="search_goods">
            <div class="left  classify_btn">
                <span><img src="../../images/index/nav_icon_class_default@2x.png" alt=""></span>
            </div>
            <div class="search_box left">
                <span id="search" class="mui-icon mui-icon-search"></span>
                <input type="search" placeholder="搜索..." >
            </div>
            <div class="left  information">
                <!--<span class="mui-icon iconfont icon-xinxi1"></span>-->
                <span><img src="../../images/index/nav_icon_information_default@2x.png" alt=""></span>
                <span>55</span>
            </div>
        </div>
        <!--轮播图-->
        <div id="slider" class="mui-slider">
            <div class="mui-slider-group mui-slider-loop">
                <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#"><img src="../../images/poster_bg_poster01_default@2x.png" /></a>
                </div>
                <!--第一张-->
                <div class="mui-slider-item">
                    <a href="#"><img src="../../images/poster_bg_poster01_default@2x.png" /></a>
                </div>
                <!--第二张-->
                <div class="mui-slider-item">
                    <a href="#"><img src="../../images/poster_bg_poster01_default@2x.png" /></a>
                </div>
                <!--第三张 -->
                <div class="mui-slider-item">
                    <a href="#"><img src="../../images/poster_bg_poster01_default@2x.png" /></a>
                </div>
                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#"><img src="../../images/poster_bg_poster01_default@2x.png" /></a>
                </div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>
        <!--邀请好友-->
        <div class="invite_friends">
            <div class="person_nav clearfix">
                <div class="left">
                    <p>
                        <a href="../all_goods/all_goods.html">
                            <span><img src="../../images/index/home_icon_all_default@2x.png" alt=""></span>
                            <br/>
                            <span>全部商品</span>
                        </a>
                    </p>
                </div>
                <div class="left">
                    <p>
                        <a href="shike_signIn.html">
                            <span><img src="../../images/invite_friends/home_icon_qdlb_default@2x.png" alt=""></span>
                            <br/>
                            <span>签到金币</span>
                        </a>
                    </p>
                </div>
                <div class="left">
                    <p>
                        <a href="invite_friends.html">
                            <span><img src="../../images/invite_friends/home_icon_yqhy_default@2x.png" alt=""></span>
                            <br/>
                            <span>邀请好友</span>
                        </a>
                    </p>
                </div>
                <div class="left">
                    <p>
                        <a href="my_reward.html">
                            <span><img src="../../images/invite_friends/home_icon_wdjl_default@2x.png" alt=""></span>
                            <br/>
                            <span>我的奖励</span>
                        </a>
                    </p>
                </div>
            </div>
            <!--巴士头条-->
            <div class="bashi_headline clearfix">
                <div class="left title">
                    <span><img src="../../images/invite_friends/home_bg_bstt_default@2x.png" alt=""></span>
                </div>
                <div class="left content">
                    <p>今日新增商品：<span><b>1000</b>件</span>，今日送出商品：<span><b>1300</b>件</span></p>
                   <!-- <p>截止目前：<span>liyingying</span>已经通过试客巴省下<span><b>100000</b>元</span></p>-->

                    <div class="wrap">
                        <div class="roll-wrap" id="roll-wrap">
                            <ul>
                                <li><p>截止目前：<span>liyingying1</span>已经通过试客巴省下<span><b>100000</b>元</span></p></li>
                                <li><p>截止目前：<span>liyingying2</span>已经通过试客巴省下<span><b>100000</b>元</span></p></li>
                                <li><p>截止目前：<span>liyingying3</span>已经通过试客巴省下<span><b>100000</b>元</span></p></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--新手专区-->
        <div class="novice_area">
            <a href="novice_area.html"><img src="../../images/index/home_bg_xinshou1_default.png" alt=""></a>
        </div>
        <!--免费试用-->
        <div class="free_try">
            <p class="title"><img src="../../images/index/content_bg_free_default@2x.png" alt=""></p>
            <div class="free_goods">
                <div class="left one">
                    <p>海量试用</p>
                    <p><img src="../../images/index/bg_com_one_default@2x.png" alt=""></p>
                </div>
                <div class="left one">
                    <p>限量试用</p>
                    <p><img src="../../images/index/bg_com_one_default@2x.png" alt=""></p>
                </div>
                <div class="left two">
                    <p class="left">
                        100%中奖兑换试用
                    </p>
                    <p class="left">
                        <img src="../../images/index/bg_com_two_default@2x.png" alt="">
                    </p>
                </div>
            </div>
        </div>
        <!--超值试用-->
        <div class="overflow_try">
            <p class="title"><img src="../../images/index/content_bg_value_default@2x.png" alt=""></p>
            <div class="overflow_goods">
                <div class="left two">
                    <p class="left">
                        高价值商品
                    </p>
                    <p class="left">
                        <img src="../../images/index/bg_com_two_default@2x.png" alt="">
                    </p>
                </div>
                <div class="left one">
                    <p>高人气商品</p>
                    <p><img src="../../images/index/bg_com_one_default@2x.png" alt=""></p>
                </div>
                <div class="left one">
                    <p>追赏试用</p>
                    <p><img src="../../images/index/bg_com_one_default@2x.png" alt=""></p>
                </div>
            </div>
        </div>
        <!--高中奖率商品推荐-->
        <div class="goods_recommend">
            <!--推荐试用标题-->
            <h1 class="recommend-try-title">
                <b>高中奖率商品推荐</b>
                <span>RECOMMEND TRIAL</span>
                <a href="#">查看更多 &gt;</a>
            </h1>
            <!--高中奖率商品推荐轮播-->
            <div class="new-try-goods">
                <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <div class="mui-scroll">
                        <div class="mui-control-item">
                            <a href="#">
                                <img src="../../images/index/poster_bg_poster01_default@2x.png " />
                            </a>
                            <div class="goods-description">
                                <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                                <p class="two">
                                    <span>价值：<b>&yen;288.00</b></span>
                                    <span class="pinkage">包邮</span>
                                </p>
                            </div>
                        </div>
                        <div class="mui-control-item">
                            <a href="#">
                                <img src="../../images/index/bg_com01_default@2x.png " />
                            </a>
                            <div class="goods-description">
                                <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                                <p class="two">
                                    <span>价值：<b>&yen;288.00</b></span>
                                    <span class="pinkage">包邮</span>
                                </p>
                            </div>
                        </div>
                        <div class="mui-control-item">
                            <a href="#">
                                <img src="../../images/index/poster_bg_poster01_default@2x.png " />
                            </a>
                            <div class="goods-description">
                                <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                                <p class="two">
                                    <span>价值：<b>&yen;288.00</b></span>
                                    <span class="pinkage">包邮</span>
                                </p>
                            </div>
                        </div>
                        <div class="mui-control-item">
                            <a href="#">
                                <img src="../../images/index/poster_bg_poster01_default@2x.png " />
                            </a>
                            <div class="goods-description">
                                <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                                <p class="two">
                                    <span>价值：<b>&yen;288.00</b></span>
                                    <span class="pinkage">包邮</span>
                                </p>
                            </div>
                        </div>
                        <div class="mui-control-item">
                            <a href="#">
                                <img src="../../images/index/bg_com01_default@2x.png " />
                            </a>
                            <div class="goods-description">
                                <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                                <p class="two">
                                    <span>价值：<b>&yen;288.00</b></span>
                                    <span class="pinkage">包邮</span>
                                </p>
                            </div>
                        </div>
                        <div class="mui-control-item">
                            <a href="#">
                                <img src="../../images/index/new_icon_more_default2x.png " />
                            </a>
                            <div class="goods-description">
                                <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                                <p class="two">
                                    <span>价值：<b>&yen;288.00</b></span>
                                    <span class="pinkage">包邮</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--品牌专场-->
        <div class="brand_special">
            <div class="title">
                <p class="title_name"><img src="../../images/brand_special/pinpai.png" alt=""></p>
                <p class="title_ba"><img src="../../images/brand_special/brand_special.png" alt=""></p>
            </div>
            <!--品牌商品-->
            <div class="brand_goods">
                <ul>
                    <li>
                        <!--品牌商品-->
                        <div class="brandGoods_detail">
                            <!--品牌商品图片-->
                            <p class="brandGoods_picture">
                                <a href="#">
                                    <img src="../../images/brand_special/goods1.png" alt="">
                                </a>
                            </p>
                            <!--品牌商品介绍-->
                            <div class="brandGoods_Introduction">
                                <p class="name">孕妇爽肤水...</p>
                                <p class="price">
                                    <span class="left">&yen;88.00</span>
                                    <span class="pinkage right">包邮</span>
                                </p>
                                <p class="limit"><b>限量50份</b></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <!--品牌商品-->
                        <div class="brandGoods_detail">
                            <!--品牌商品图片-->
                            <p class="brandGoods_picture">
                                <a href="#">
                                    <img src="../../images/brand_special/goods2.png" alt="">
                                </a>
                            </p>
                            <!--品牌商品介绍-->
                            <div class="brandGoods_Introduction">
                                <p class="name">燕窝小麦面...</p>
                                <p class="price">
                                    <span class="left">&yen;88.00</span>
                                    <span class="pinkage right">包邮</span>
                                </p>
                                <p class="limit"><b>限量25份</b></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <!--品牌商品-->
                        <div class="brandGoods_detail">
                            <!--品牌商品图片-->
                            <p class="brandGoods_picture">
                                <a href="#">
                                    <img src="../../images/brand_special/goods3.png" alt="">
                                </a>
                            </p>
                            <!--品牌商品介绍-->
                            <div class="brandGoods_Introduction">
                                <p class="name">口腔护理套...</p>
                                <p class="price">
                                    <span class="left">&yen;88.00</span>
                                    <span class="pinkage right">包邮</span>
                                </p>
                                <p class="limit"><b>限量60份</b></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <!--品牌商品-->
                        <div class="brandGoods_detail">
                            <!--品牌商品图片-->
                            <p class="brandGoods">
                                <a href="#">
                                    <img src="../../images/brand_special/goodsAll.png" alt="">
                                </a>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>

        </div>

        <!--试用商品-->
        <div class="try_goods">
            <div class="try_goods_title">
                <h1><span class="line"></span><span>试用商品</span><span class="line"></span></h1>
            </div>
        </div>

        <!--商品展示列表-->
        <div class="recommend-try">
    <div class="recommend-try-goods">
        <ul>
            <li>
                <a href="../../detail.html">
                    <img src="../../images/poster_bg_poster01_default@2x.png " />
                </a>
                <div class="goods-description">
                    <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                    <p class="two">
                        <span>价值：<b>&yen;288.00</b></span>
                        <span class="pinkage">包邮</span>
                    </p>
                    <p class="three">
                        <span>限量：<b>10份</b></span>
                        <span class="applyFor">已申请<b>1000份</b></span>
                    </p>
                </div>
            </li>
            <li>
                <a href="../../detail.html">
                    <img src="../../images/poster_bg_poster01_default@2x.png " />
                </a>
                <div class="goods-description">
                    <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                    <p class="two">
                        <span>价值：<b>&yen;288.00</b></span>
                        <span class="pinkage">包邮</span>
                    </p>
                    <p class="three">
                        <span>限量：<b>10份</b></span>
                        <span class="applyFor">已申请<b>1000份</b></span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>
        <div class="title">
            这是webview模式选项卡中的第2个子页面，该页面展示一个支持下拉刷新、上拉加载的消息列表
        </div>
        <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 2</a>
            </li>
            <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 3</a>
            </li>
            <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 4</a>
            </li>
        </ul>
    </div>
</div>

<!--新手礼包弹框-->
<div class="novicePacks_modal" style="display:none;">
    <div class="novicePacks_box">
        <p><input type="button" value="查看"></p>
        <p class="novicePacks_close"><img src="../../images/invite_friends/sign_icon_popup_off_default@2x.png" alt=""></p>
    </div>
    <div class="mask_layer"></div>
</div>
</body>
<script src="../../js/jquery-1.10.2.js"></script>
<script src="../../js/invite_friends/scroll_top.js "></script>
<script type="text/javascript" src="../../js/mui.js"></script>
<script src="../../js/alert.js"></script>
<script>
    mui('body').on('tap','a',function(){document.location.href=this.href;});
    mui("#slider").slider({
        interval: 2000
    });

    $('.novicePacks_close').on('tap',function(){
        $('.novicePacks_modal').hide();
    })
</script>


<script>
    mui.init({
        swipeBack: false,
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                callback: pulldownRefresh
            },
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });
    /**
     * 下拉刷新具体业务实现
     */
    function pulldownRefresh() {
        setTimeout(function() {
            var table = document.body.querySelector('.mui-table-view');
            var cells = document.body.querySelectorAll('.mui-table-view-cell');
            for (var i = cells.length, len = i + 3; i < len; i++) {
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell';
                li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                //下拉刷新，新纪录插到最前面；
                table.insertBefore(li, table.firstChild);
            }
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
        }, 1000);
    }
    var count = 0;
    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh() {
        setTimeout(function() {
            mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
            var table = document.body.querySelector('.mui-table-view');
            var cells = document.body.querySelectorAll('.mui-table-view-cell');
            for (var i = cells.length, len = i + 2; i < len; i++) {
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell';
                li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                table.appendChild(li);
            }
        }, 1000);
    }
</script>
</html>